<template>
  <div class="information">
    <div style="background-color: #fff;">
      <el-input
        v-model="input3"
        style="width: 240px;margin: 10px;"
        placeholder="请输入员工名称查询"
        :suffix-icon="Search"
      />
      <el-button plain @click="query">查询</el-button>
      <el-button plain @click="reset">重置</el-button>

    </div>
    <div style="background-color: #fff;">
      <el-button plain @click="addDialogVisible = true" style="margin: 10px;">新增</el-button>
    </div>
    <el-table :data="tableData" ref="tableRef" style="width: 100%;">
      <el-table-column align="center" fixed prop="userdename" label="员工名称"/>
      <el-table-column align="center" prop="username" label="账号"/>
      <el-table-column align="center" prop="password" label="密码"/>
      <el-table-column align="center" prop="userdepartment" label="员工身份"/>
      <el-table-column align="center" fixed="right" label="操作" min-width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="editUserText(scope.row)">修改</el-button>
          <el-button v-if="scope.row.username=='admin'?false:true" 
            link type="danger" size="small" @click="delUserClick(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
        @current-change="currentChange"
        :current-page="pageing.page" 
        :page-size="pageing.size"
        :total="pageing.total"
        style="float: right"
        layout=" prev, pager, next"
       />
    </div>
    <el-dialog
    v-model="addDialogVisible"
    title="新增成员"
    width="800"
    :before-close="handleClose"
    align-center
  >
    <el-form :model="userForm" ref="userFormRef" :rules="userRules" label-width="100px">
      <div style="overflow: hidden;">
        <el-form-item prop="userdename" label="员工名称" style="width: 50%;float: left;">
          <el-input v-model="userForm.userdename" placeholder="请输入员工名称"/>
        </el-form-item>
        <el-form-item prop="username" label="账号" style="width: 50%;float: left;">
          <el-input v-model="userForm.username" placeholder="请输入手机号"/>
        </el-form-item>
      </div>
      <div style="overflow: hidden;">
        <el-form-item prop="password" label="密码" style="width: 50%;float: left;">
          <el-input v-model="userForm.password" placeholder="请输入密码"/>
        </el-form-item>
        <el-form-item prop="userdepartment" label="员工身份" style="width: 50%;float: left;">
          <el-radio-group v-model="userForm.userdepartment">
            <el-radio value="销售">销售</el-radio>
            <el-radio value="写手">写手</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="addUserClick(userFormRef)">
          提交
        </el-button>
        <el-button @click="cancelClick">取消</el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog
    v-model="editDialogVisible"
    title="修改成员"
    width="800"
    :before-close="handleClose"
    align-center
  >
    <el-form ref="userFormRef" :rules="userRules" :model="userForm" label-width="100px">
      <div style="overflow: hidden;">
        <el-form-item prop="customerName" label="员工名称" style="width: 50%;float: left;">
          <el-input v-model="userForm.userdename"/>
        </el-form-item>
        <el-form-item prop="username" label="账号" style="width: 50%;float: left;">
          <el-input v-model="userForm.username" disabled/>
        </el-form-item>
      </div>
      <div style="overflow: hidden;">
        <el-form-item prop="password" label="密码" style="width: 50%;float: left;">
          <el-input v-model="userForm.password"/>
        </el-form-item>
        <el-form-item prop="userdepartment" label="员工身份" style="width: 50%;float: left;">
          <el-radio-group v-model="userForm.userdepartment">
            <el-radio value="销售">销售</el-radio>
            <el-radio value="写手">写手</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="editUserClick(userFormRef,userForm)">
          提交
        </el-button>
        <el-button @click="editDialogVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
  </div>
</template>

<script setup name="information">
import { ref,reactive,onMounted,getCurrentInstance,onActivated } from 'vue'
import { ElMessageBox,ElNotification } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { getUserList,addUser,editUser,deleteUser } from "@/api/modules/user";
// el-table支持鼠标横向拖拽滚动
const { proxy } = getCurrentInstance()
const tableRef = ref()
nextTick(() => {
  if (tableRef.value) {
    proxy.$dragTable(tableRef)
  }
})
// 员工信息列表
const tableData = reactive([])
const tableDataed = reactive([])
const input3 = ref('')
const addDialogVisible = ref(false)
const editDialogVisible = ref(false)
// 新增用户存储字段
const userForm = reactive({
  userdename:"",
  username:"",
  password:"",
  userdepartment:"",
})
// 验证规则
const userFormRef = ref()
const userRules = reactive({
  userdename: [{ required: true, message: "请输入员工名称", trigger: "blur" }],
  username: [{ required: true, message: "请输入手机号", trigger: "blur" },
          {
          pattern: /^1[3-9]\d{9}$/,
          message: '手机号格式不正确',
          trigger: 'blur'
        }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  userdepartment: [{ required: true, message: "请选择身份", trigger: "change" }]
});
const pageing = ref({
  total:0,
  page:1,
  size:5,
})
// 选择第几页
const currentChange = (val)=> {
  console.log("翻页，当前为第几页", val);
  tableData.length=0;
  for(let i=0;i<5;i++){
    console.log(tableDataed[(val-1)*5+i]); 
    if(tableDataed[(val-1)*5+i]){
      tableData.push(tableDataed[(val-1)*5+i])
    }
  } 
  pageing.value.page = val;
  console.log(pageing.value.total);
}
onActivated(()=>{
  userFun();
})
// 1.执行获取用户信息接口
const userFun = async()=>{
  const { data } = await getUserList();
  Object.assign(tableDataed,data);
  pageing.value.total = data.length;
  currentChange(1)
}

// 新增成员提交
const addUserClick = (formEl) =>{
  if (!formEl) return;
  formEl.validate(async valid => {
    if (!valid) return;
    try {
      const data = await addUser({...userForm});
      console.log(data);
      if(data.code == 200){
        cancelClick();
        addDialogVisible.value=false;
        ElNotification({
          title: "新增成员",
          message: "用户新增成功",
          type: "success",
          duration: 1000
        });
        userFun();
      }else{
        addDialogVisible.value=true;
        ElNotification({
          title: "新增成员",
          message: "用户新增失败",
          type: "error",
          duration: 1000
        });
      }
    }
    finally {
      addDialogVisible.value = false;
    }
  })
}
// 修改获取信息
const editUserText = (user) =>{
  editDialogVisible.value=true;
  Object.assign(userForm,user);
}
// 修改成员提交
const editUserClick = (formEl,user) =>{
  if (!formEl) return;
  formEl.validate(async valid => {
    if (!valid) return;
    try {
      const data = await editUser({...user});
      if(data.code == 200){
        editDialogVisible.value=false;
        ElNotification({
          title: "修改成员",
          message: "用户修改成功",
          type: "success",
          duration: 1000
        });
        userFun();
      }else{
        editDialogVisible.value=true;
        ElNotification({
          title: "修改成员",
          message: "用户修改失败",
          type: "error",
          duration: 1000
        });
      }
    }
    finally {
      editDialogVisible.value = false;
    }
  })
}
// 删除用户
const delUserClick = async(user)=>{
  const data = await deleteUser({"username":user.username});
  if(data.code == 200){
    ElNotification({
      title: "删除成员",
      message: "用户删除成功",
      type: "success",
      duration: 1000
    });
    userFun();
  }else{
    ElNotification({
      title: "删除成员",
      message: "用户删除失败",
      type: "error",
      duration: 1000
    });
  }
}
// 清空新增表单数据

// 取消弹窗
const cancelClick = ()=>{
  addDialogVisible.value=false;
  editDialogVisible.value=false;
  const obj = {
    userdename:"",
    username:"",
    password:"",
    userdepartment:"",
  }
  Object.assign(userForm,obj);
}
const getData = ()=>{

}
// 查询
const query = async() =>{
  const { data } = await getUserList({"userdename":input3.value});
  tableDataed.length=0
  Object.assign(tableDataed,data);
  pageing.value.total = data.length;
  currentChange(1)
}
// 重置
const reset = () =>{
  input3.value = "";
  userFun();
}
// 空白取消
const handleClose = (done) => {
  ElMessageBox.confirm('您确定要关闭此对话框吗?')
    .then(() => {
      cancelClick();
      done()
    })
    .catch(() => {
      // catch error
    })
}
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
